<script setup lang="ts">
import { ref, computed } from 'vue'

/**
 * 侧边栏组件
 * 包含文件夹管理和笔记列表功能
 */

interface Folder {
  id: number
  name: string
  count: number
}

interface Note {
  id: number
  title: string
  content: string
  folderId: number
  createdAt: string
  updatedAt: string
}

const props = defineProps<{
  folders: Folder[]
  notes: Note[]
  currentFolder: string
  currentNote: Note | null
}>()

const emit = defineEmits<{
  folderSelect: [folder: Folder]
  noteSelect: [note: Note]
  createNote: []
  createFolder: [name: string]
  renameFolder: [id: number, name: string]
  deleteFolder: [id: number]
  renameNote: [id: number, title: string]
  deleteNote: [id: number]
}>()

// 搜索关键词
const searchKeyword = ref('')

// 文件夹管理状态
const editingFolderId = ref<number | null>(null)
const newFolderName = ref('')
const contextMenuFolder = ref<Folder | null>(null)

// 笔记管理状态
const editingNoteId = ref<number | null>(null)
const newNoteTitle = ref('')

// 过滤后的笔记列表
const filteredNotes = computed(() => {
  let notes = props.notes

  // 根据搜索关键词过滤
  if (searchKeyword.value) {
    notes = notes.filter(
      (note) =>
        note.title.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
        note.content.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }

  return notes
})

/**
 * 选择文件夹
 * @param folder 文件夹对象
 */
const selectFolder = (folder: Folder) => {
  emit('folderSelect', folder)
}

/**
 * 选择笔记
 * @param note 笔记对象
 */
const selectNote = (note: Note) => {
  emit('noteSelect', note)
}

/**
 * 创建新笔记
 */
const createNewNote = () => {
  emit('createNote')
}

/**
 * 显示新建文件夹输入框
 */
const showCreateFolder = () => {
  editingFolderId.value = -1
  newFolderName.value = ''
}

/**
 * 创建新文件夹
 */
const createFolder = () => {
  if (newFolderName.value.trim()) {
    emit('createFolder', newFolderName.value.trim())
    editingFolderId.value = null
    newFolderName.value = ''
  }
}

/**
 * 开始重命名文件夹
 * @param folder 要重命名的文件夹
 */
const startRenameFolder = (folder: Folder) => {
  editingFolderId.value = folder.id
  newFolderName.value = folder.name
}

/**
 * 重命名文件夹
 */
const renameFolder = () => {
  if (editingFolderId.value && newFolderName.value.trim()) {
    emit('renameFolder', editingFolderId.value, newFolderName.value.trim())
    editingFolderId.value = null
    newFolderName.value = ''
  }
}

/**
 * 删除文件夹
 * @param folder 要删除的文件夹
 */
const deleteFolder = (folder: Folder) => {
  if (confirm(`确定要删除文件夹 "${folder.name}" 吗？`)) {
    emit('deleteFolder', folder.id)
  }
}

/**
 * 取消编辑
 */
const cancelEdit = () => {
  editingFolderId.value = null
  newFolderName.value = ''
}

/**
 * 处理右键菜单
 * @param event 鼠标事件
 * @param folder 文件夹对象
 */
const handleContextMenu = (event: MouseEvent, folder: Folder) => {
  event.preventDefault()
  contextMenuFolder.value = folder
  // 这里可以添加右键菜单的显示逻辑
}

/**
 * 开始重命名笔记
 * @param note 要重命名的笔记
 */
const startRenameNote = (note: Note) => {
  editingNoteId.value = note.id
  newNoteTitle.value = note.title
}

/**
 * 重命名笔记
 */
const renameNote = () => {
  if (editingNoteId.value && newNoteTitle.value.trim()) {
    emit('renameNote', editingNoteId.value, newNoteTitle.value.trim())
    editingNoteId.value = null
    newNoteTitle.value = ''
  }
}

/**
 * 删除笔记
 * @param note 要删除的笔记
 */
const deleteNote = (note: Note) => {
  if (confirm(`确定要删除笔记 "${note.title}" 吗？`)) {
    emit('deleteNote', note.id)
  }
}

/**
 * 取消笔记编辑
 */
const cancelNoteEdit = () => {
  editingNoteId.value = null
  newNoteTitle.value = ''
}
</script>

<template>
  <div class="sidebar">
    <!-- 顶部搜索栏 -->
    <div class="search-section">
      <div class="search-box">
        <input v-model="searchKeyword" type="text" placeholder="搜索笔记..." class="search-input" />
        <svg class="search-icon" viewBox="0 0 24 24" width="16" height="16">
          <path
            fill="currentColor"
            d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
          />
        </svg>
      </div>
      <button class="new-note-btn" @click="createNewNote" title="新建笔记">
        <svg viewBox="0 0 24 24" width="16" height="16">
          <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
        </svg>
      </button>
    </div>

    <!-- 文件夹列表 -->
    <div class="folders-section">
      <div class="section-header">
        <h3 class="section-title">我的文件夹</h3>
        <button class="add-folder-btn" @click="showCreateFolder" title="新建文件夹">
          <svg viewBox="0 0 24 24" width="14" height="14">
            <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
          </svg>
        </button>
      </div>
      <div class="folder-list">
        <!-- 新建文件夹输入框 -->
        <div v-if="editingFolderId === -1" class="folder-edit">
          <input
            v-model="newFolderName"
            @keyup.enter="createFolder"
            @keyup.escape="cancelEdit"
            class="folder-input"
            placeholder="输入文件夹名称"
            autofocus
          />
          <div class="folder-actions">
            <button class="action-btn confirm" @click="createFolder">
              <svg viewBox="0 0 24 24" width="12" height="12">
                <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
              </svg>
            </button>
            <button class="action-btn cancel" @click="cancelEdit">
              <svg viewBox="0 0 24 24" width="12" height="12">
                <path
                  fill="currentColor"
                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                />
              </svg>
            </button>
          </div>
        </div>

        <div
          v-for="folder in folders"
          :key="folder.id"
          class="folder-item"
          :class="{ active: currentFolder === folder.name }"
          @click="selectFolder(folder)"
          @contextmenu="handleContextMenu($event, folder)"
        >
          <!-- 编辑模式 -->
          <div v-if="editingFolderId === folder.id" class="folder-edit">
            <input
              v-model="newFolderName"
              @keyup.enter="renameFolder"
              @keyup.escape="cancelEdit"
              class="folder-input"
              autofocus
            />
            <div class="folder-actions">
              <button class="action-btn confirm" @click="renameFolder">
                <svg viewBox="0 0 24 24" width="12" height="12">
                  <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
                </svg>
              </button>
              <button class="action-btn cancel" @click="cancelEdit">
                <svg viewBox="0 0 24 24" width="12" height="12">
                  <path
                    fill="currentColor"
                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                  />
                </svg>
              </button>
            </div>
          </div>

          <!-- 显示模式 -->
          <template v-else>
            <div class="folder-info">
              <svg class="folder-icon" viewBox="0 0 24 24" width="16" height="16">
                <path
                  fill="currentColor"
                  d="M10 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2h-8l-2-2z"
                />
              </svg>
              <span class="folder-name">{{ folder.name }}</span>
            </div>
            <div class="folder-right">
              <span class="folder-count">{{ folder.count }}</span>
              <div class="folder-menu">
                <button class="menu-btn" @click.stop="startRenameFolder(folder)" title="重命名">
                  <svg viewBox="0 0 24 24" width="12" height="12">
                    <path
                      fill="currentColor"
                      d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
                    />
                  </svg>
                </button>
                <button class="menu-btn delete" @click.stop="deleteFolder(folder)" title="删除">
                  <svg viewBox="0 0 24 24" width="12" height="12">
                    <path
                      fill="currentColor"
                      d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 笔记列表 -->
    <div class="notes-section">
      <h3 class="section-title">{{ currentFolder }}</h3>
      <div class="note-list">
        <div
          v-for="note in filteredNotes"
          :key="note.id"
          class="note-item"
          :class="{ active: currentNote?.id === note.id }"
          @click="selectNote(note)"
        >
          <!-- 编辑模式 -->
          <div v-if="editingNoteId === note.id" class="note-edit">
            <input
              v-model="newNoteTitle"
              @keyup.enter="renameNote"
              @keyup.escape="cancelNoteEdit"
              class="note-input"
              placeholder="输入笔记标题"
              autofocus
            />
            <div class="note-actions">
              <button class="action-btn confirm" @click="renameNote">
                <svg viewBox="0 0 24 24" width="12" height="12">
                  <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
                </svg>
              </button>
              <button class="action-btn cancel" @click="cancelNoteEdit">
                <svg viewBox="0 0 24 24" width="12" height="12">
                  <path
                    fill="currentColor"
                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                  />
                </svg>
              </button>
            </div>
          </div>

          <!-- 显示模式 -->
          <template v-else>
            <div class="note-header">
              <h4 class="note-title">{{ note.title }}</h4>
              <div class="note-header-right">
                <span class="note-date">{{ note.createdAt }}</span>
                <div class="note-menu">
                  <button class="menu-btn" @click.stop="startRenameNote(note)" title="重命名">
                    <svg viewBox="0 0 24 24" width="12" height="12">
                      <path
                        fill="currentColor"
                        d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
                      />
                    </svg>
                  </button>
                  <button class="menu-btn delete" @click.stop="deleteNote(note)" title="删除">
                    <svg viewBox="0 0 24 24" width="12" height="12">
                      <path
                        fill="currentColor"
                        d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
                      />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <p class="note-preview">{{ note.content.substring(0, 100) }}...</p>
            <div class="note-meta">
              <span class="note-words">{{ note.updatedAt }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.sidebar {
  width: 300px;
  height: 100vh;
  background: #f8f9fa;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-section {
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  gap: 8px;
}

.search-box {
  flex: 1;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: #007bff;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
}

.new-note-btn {
  padding: 8px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.new-note-btn:hover {
  background: #007bff;
  border-color: #007bff;
  color: white;
}

.folders-section,
.notes-section {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.add-folder-btn {
  padding: 4px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  transition: all 0.2s;
}

.add-folder-btn:hover {
  background: #e9ecef;
  color: #007bff;
}

.folder-list,
.note-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.folder-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
}

.folder-item:hover {
  background: #e9ecef;
}

.folder-item:hover .folder-menu {
  opacity: 1;
}

.folder-item.active {
  background: #007bff;
  color: white;
}

.folder-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
}

.folder-input {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid #007bff;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

.folder-actions {
  display: flex;
  gap: 4px;
}

.action-btn {
  padding: 4px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.action-btn.confirm {
  background: #28a745;
  color: white;
}

.action-btn.confirm:hover {
  background: #218838;
}

.action-btn.cancel {
  background: #6c757d;
  color: white;
}

.action-btn.cancel:hover {
  background: #5a6268;
}

.folder-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.folder-icon {
  color: #6c757d;
}

.folder-item.active .folder-icon {
  color: white;
}

.folder-name {
  font-size: 14px;
  font-weight: 500;
}

.folder-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.folder-count {
  font-size: 12px;
  color: #6c757d;
  background: #e9ecef;
  padding: 2px 6px;
  border-radius: 10px;
}

.folder-item.active .folder-count {
}

.folder-menu {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.menu-btn {
  padding: 4px;
  border: none;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  transition: all 0.2s;
}

.menu-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #007bff;
}

.menu-btn.delete:hover {
  color: #dc3545;
}

.folder-item.active .menu-btn {
  color: rgba(255, 255, 255, 0.7);
}

.folder-item.active .menu-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.note-item {
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  border: 1px solid transparent;
  position: relative;
}

.note-item:hover {
  background: #e9ecef;
}

.note-item:hover .note-menu {
  opacity: 1;
}

.note-item.active {
  background: white;
  border-color: #007bff;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

.note-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-input {
  padding: 6px 8px;
  border: 1px solid #007bff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  outline: none;
}

.note-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.note-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-menu {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.note-title {
  font-size: 14px;
  font-weight: 600;
  color: #212529;
  margin: 0;
  line-height: 1.3;
}

.note-date {
  font-size: 12px;
  color: #6c757d;
  white-space: nowrap;
}

.note-preview {
  font-size: 13px;
  color: #6c757d;
  line-height: 1.4;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.note-words {
  font-size: 12px;
  color: #6c757d;
}
</style>
